<script setup lang='ts'>
import { computed, ref } from 'vue';
import { NModal, NTabPane, NTabs } from 'naive-ui';
import General from './General.vue';
import aiMsg from '@/views/chat/aichatmsg.vue';
import About from './About.vue';
import { useAuthStore } from '@/store';
import { SvgIcon } from '@/components/common';

interface Props {
  visible: boolean;
}

interface Emit {
  (e: 'update:visible', visible: boolean): void;
}

const props = defineProps<Props>();

const emit = defineEmits<Emit>();

const authStore = useAuthStore();

const isChatGPTAPI = computed<boolean>(() => !!authStore.isChatGPTAPI);

const active = ref('General');

const show = computed({
  get() {
    return props.visible;
  },
  set(visible: boolean) {
    emit('update:visible', visible);
  }
});
</script>

<template>
  <NModal v-model:show="show" :auto-focus="false" preset="card" style="width: 100%; max-width: 500px">
    <div>
      <NTabs v-model:value="active" type="line" animated>
        <NTabPane name="General" tab="General">
          <template #tab>
            <SvgIcon class="text-lg" icon="ri:file-user-line" />
            <span class="ml-2">{{ $t('setting.personal') }}</span>
          </template>
          <div class="min-h-[100px]">
            <General @close="show = false" />
          </div>
        </NTabPane>

        <NTabPane v-if="isChatGPTAPI" name="Advanced" tab="Advanced">
          <template #tab>
            <SvgIcon class="text-lg" icon="ri:equalizer-line" />
            <!-- <span class="ml-2">{{ $t('setting.advanced') }}</span> -->
            <span class="ml-2">{{ $t('setting.model') }}</span>
          </template>
          <div class="min-h-[100px]">
            <!-- <Advanced /> -->
            <aiModel />
          </div>
        </NTabPane>

        <!-- <NTabPane name="chatmsg" tab="chatmsg">
          <template #tab>
            <SvgIcon class="text-lg" icon="mdi:message" />
            <span class="ml-2">{{ $t('setting.message') }}</span>
          </template>
          <aiMsg />
        </NTabPane> -->

        <!-- <NTabPane name="Config" tab="Config">
          <template #tab>
            <SvgIcon class="text-lg" icon="ri:list-settings-line" />
            <span class="ml-2">{{ $t('setting.about') }}</span>
          </template>
          <About />
        </NTabPane> -->
      </NTabs>
    </div>
  </NModal>
</template>
